<template>
  <p-form-model :model="formInfo" :rules="rules">
    <div class="item item-left">
      <p-form-model-item label="价格变更编号">
        <span>{{ formInfo.serialNumber }}</span>
      </p-form-model-item>
      <p-form-model-item label="销售组织">
        <span>{{ orgOptions[formInfo.salesOrganization] }}</span>
      </p-form-model-item>
      <p-form-model-item label="变更年月">
        <span>
          {{ formInfo.startTime | formatDate('YYYY-MM') }} -
          {{ formInfo.endTime | formatDate('YYYY-MM') }}
        </span>
      </p-form-model-item>
      <p-form-model-item label="价格变更简述">
        <span>{{ formInfo.priceChangeDescribe }}</span>
      </p-form-model-item>
    </div>
    <div class="item item-right">
      <p-form-model-item label="当前状态">
        <span>{{ stateOptions[formInfo.currStatus] }}</span>
      </p-form-model-item>
      <p-form-model-item label="销售组">
        <span>{{ formInfo.salesGroupName }}</span>
      </p-form-model-item>
    </div>
  </p-form-model>
</template>

<script>
import { postOrganizationInfo } from '@/api/public.js';

export default {
  props: {
    formInfo: {
      type: Object,
      default: () => ({}),
    },
    planType: {
      type: String,
      default: 'BP',
    },
  },
  data() {
    return {
      orgOptions: [],
    };
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['state'] || {};
    },
  },
  watch: {},
  async created() {
    this.orgOptions = await this.postOrganizationInfo();
    console.log('this.orgOptions: ', this.orgOptions);
  },
  mounted() {},
  methods: {
    async postOrganizationInfo() {
      const result = await postOrganizationInfo({
        code: 'ltcsmsizebu',
      });
      const data = result?.data?.data || [];
      return data.reduce((pre, cur) => {
        pre[cur.code] = cur.name;
        return pre;
      }, {});
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.poros-form-item {
  display: flex;
  margin-bottom: 0;
}
.item {
  width: 48%;
  display: inline-block;
}
// .poros-form-item {
//   width: 48%;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 180px);
}
</style>
